<template>
  <div>
    <el-card shadow="never" style="margin:30px">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <p class="title">订单信息:
            <button v-if="formList.status === 0" class="status" style="background-color:#f56c6c">待处理</button>
            <button v-if="formList.status === 1" class="status" style="background-color:#e6a23c">退货中</button>
            <button v-if="formList.status === 2" class="status" style="color: #409eff;background-color:#d9ecff">已完成</button>
            <button v-if="formList.status === 3" class="status" style="background-color:#409eff">已拒绝</button>
          </p>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10" :offset="0">
          <p>订单编号: {{ formList.orderSn }} <el-link type="primary" :underline="false" style="margin-left:10px" @click="seeOrder(formList.orderId)">查看订单详情</el-link></p>
        </el-col>
        <el-col :span="6" :offset="0">
          <p>退单人姓名: {{ formList.returnName }}</p>
        </el-col>
        <el-col :span="6" :offset="0">
          <p>退单理由: {{ formList.reason }}</p>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          <p>退单描述: {{ formList.description }}</p>
        </el-col>
        <el-col :span="6" :offset="0">
          <p>申请时间: {{ formList.createTime }}</p>
        </el-col>
        <el-col :span="6" :offset="0">
          <div class="flexBox">
            <p>退单图片: </p>
            <img :src="formList.proofPics" style="width:100px;height:100px">
          </div>
        </el-col>
      </el-row>
      <el-divider />

      <p class="title">退货商品:</p>
      <el-table :data="productList" border stripe>
        <el-table-column
          prop="productName"
          label="商品名称"
          width="180"
          fixed
          align="center"
        />
        <el-table-column
          label="商品图片"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.productPic" style="width:100px;height:100px">
          </template>
        </el-table-column>
        <el-table-column
          prop="productBrand"
          label="商品品牌"
          width="150"
          align="center"
        />
        <el-table-column
          label="商品价格"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.productPrice | money }}</p>
          </template>
        </el-table-column>
        <el-table-column
          label="商品属性"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.productAttr[0].key }}</span>: <span>{{ scope.row.productAttr[0].value }}</span>&ensp;
            <span>{{ scope.row.productAttr[1].key }}</span>: <span>{{ scope.row.productAttr[1].value }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="productCount"
          label="商品数量"
          width="150"
          align="center"
        />
        <el-table-column
          label="小计"
          width="150"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.productPrice * scope.row.productCount | money }}</p>
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <p class="title">用户信息:</p>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          <p>联系人: {{ formList.returnName }}</p>
        </el-col>
        <el-col :span="6" :offset="0">
          <p>联系电话: {{ formList.returnPhone }}</p>
        </el-col>
      </el-row>
      <el-divider />
      <div v-if="formList.status === 0">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <p class="title">费用信息:</p>
          </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-bottom:20px">
          <el-col :span="6" :offset="0">
            <p>支付金额: <span style="color:red">{{ formList.productRealPrice | money }}</span></p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p>运费金额: <span style="color:red">0</span></p>
          </el-col>
        </el-row>
        <el-form ref="forms" :inline="true" :rules="rules" :model="costInfo" class="demo-form-inline" size="small">
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="退款金额">
                <el-input-number v-model="costInfo.returnAmount" size="medium" :min="0" :max="100000" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="处理人" prop="handleMan">
                <el-input v-model="costInfo.handleMan" placeholder="处理人" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="处理备注" prop="handleNote">
                <el-input v-model="costInfo.handleNote" type="textarea" placeholder="处理备注" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="btnBox">
          <el-button size="small" class="firstBtn" type="primary" @click="agree">同意退款</el-button>
          <el-button size="small" class="firstBtn" plain type="info" @click="refuse">拒绝退款</el-button>
        </div>
      </div>
      <div v-if="formList.status === 1">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <p class="title">费用信息</p>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <p>退单金额: <span style="color:red">{{ formList.returnAmount | money }}</span></p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p>运费金额: <span style="color:red">0</span></p>
          </el-col>
        </el-row>
        <el-divider />
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <p class="title">处理结果</p>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom:20px">
          <el-col :span="6" :offset="0">
            <p>处理人: {{ formList.handleMan }}</p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p>处理备注: {{ formList.handleNote }}</p>
          </el-col>
          <el-col :span="12" :offset="0">
            <p>处理时间: {{ formList.handleTime }}</p>
          </el-col>
        </el-row>
        <el-form ref="back" :model="receiving" :rules="rule" label-width="80px" :inline="false" size="small">

          <el-row :gutter="20">
            <el-col :span="6" :offset="0">
              <el-form-item label="收货人" prop="receiveMan">
                <el-input v-model="receiving.receiveMan" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="收货备注" prop="receiveNote">
                <el-input v-model="receiving.receiveNote" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-button size="small" class="sureBtn" type="primary" @click="confirm">确认收货</el-button>
      </div>
      <div v-if="formList.status === 2">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <p class="title">费用信息</p>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <p>退单金额: <span style="color:red">{{ formList.returnAmount }}</span></p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p>运费金额: <span style="color:red">0</span></p>
          </el-col>
        </el-row>
        <el-divider />
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <p class="title">处理结果</p>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <p>处理人: {{ formList.handleMan }}</p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p>处理备注: {{ formList.handleNote }}</p>
          </el-col>
          <el-col :span="12" :offset="0">
            <p>处理时间: {{ formList.handleTime }}</p>
          </el-col>
        </el-row>
        <el-divider />
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <p class="title">收货信息</p>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <p>退单收货人: {{ formList.receiveMan }}</p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p>退单收货备注: {{ formList.receiveNote }}</p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p>退单收货时间: {{ formList.receiveTime }}</p>
          </el-col>
        </el-row>
      </div>
      <div v-if="formList.status === 3">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <p class="title">费用信息:</p>
          </el-col>
        </el-row>
        <el-form :inline="true" :model="formList" class="demo-form-inline" size="small">
          <el-row :gutter="20">
            <el-col :span="6" :offset="0">
              <el-form-item label="退单金额">
                <span style="color:red">{{ formList.returnAmount }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="运费金额">
                <span style="color:red">0</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider />
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <p class="title">处理结果:</p>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6" :offset="0">
              <el-form-item label="处理人">
                <span>{{ formList.handleMan }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="处理备注">
                <span>{{ formList.handleNote }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="处理时间">
                <span>{{ formList.handleTime }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>

  </div>
</template>

<script>
import { orderReturn, rejectApply, agreeApply, receiveProduct } from '@/api/order/chargeBack'
export default {
  data() {
    return {
      formList: {

      }, // 基本信息
      productList: [], // 退货商品信息
      receiving: {}, // 退货中提交信息
      costInfo: { // 待处理提交信息
        returnAmount: '0'
      },
      rules: {
        handleMan: [
          { required: true, message: '请输入处理人', trigger: 'blur' }
        ],
        handleNote: [
          { required: true, message: '请备注说明', trigger: 'blur' }
        ]
      },
      rule: {
        receiveMan: [
          { required: true, message: '请输入处理人', trigger: 'blur' }
        ],
        receiveNote: [
          { required: true, message: '请备注说明', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {

  },
  created() {
    this.init()
  },
  mounted() {

  },
  methods: {
    agree() { // 同意退款
      this.$refs.forms.validate((valid) => {
        console.log(valid)
        if (valid) {
          this.costInfo.id = this.$route.params.id
          agreeApply(this.$route.params.id, this.costInfo).then(res => {
            const { message: errMag, success } = res
            if (success) {
              this.$message.success('已同意退款')
              this.init()
            } else {
              this.$message.error(errMag)
            }
          })
        } else {
          this.$message.error('请注意表单验证')
          return false
        }
      })
    },
    seeOrder(id) { // 查看订单详情
      this.$router.push({ name: 'OrderDetail', params: { id: id }})
    },
    refuse() { // 拒绝退款
      this.$refs.forms.validate((valid) => {
        if (valid) {
          this.costInfo.id = this.$route.params.id
          rejectApply(this.$route.params.id, this.costInfo).then(res => {
            const { message: errMag, success } = res
            if (success) {
              this.$message.success('已拒绝退款')
              this.init()
            } else {
              this.$message.error(errMag)
            }
          })
        } else {
          this.$message.error('请注意表单验证')
          return false
        }
      })
    },
    confirm() { // 确认收货
      this.$refs.back.validate((valid) => {
        if (valid) {
          this.receiving.id = this.$route.params.id
          receiveProduct(this.$route.params.id, this.receiving).then(res => {
            const { message: errMag, success } = res
            if (success) {
              this.$message.success('已确认收货')
              this.init()
            } else {
              this.$message.error(errMag)
            }
          })
        } else {
          this.$message.error('请注意表单验证')
          return false
        }
      })
    },
    init() {
      orderReturn(this.$route.params.id).then(res => {
        const { message: errMag, data, success } = res
        if (success) {
          const { orderReturnApply } = data
          orderReturnApply.productAttr = JSON.parse(orderReturnApply.productAttr)
          this.formList = orderReturnApply
          this.productList.push(orderReturnApply)
          console.log(this.productList)
        } else {
          this.$message.error(errMag)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
     .firstBtn{
        width: 150px;
        height: 38px;
        margin:30px 10px;
      }
      .sureBtn{
            margin: 30px auto;
            margin-top:30px;
            display: block;
            width: 150px;
            height: 38px;
      }
      p{
        line-height: 40px;
        font-size: 14px;
        margin: 3px 0;
        margin-bottom:10px;
      }
      .title{
        color: rgba(0,0,0,.85);
        font-weight: 700;
        font-size: 16px;
        margin-bottom: 20px
      }
      .flexBox{
         display: flex;
         p{
             margin-right:5px
         }
         img{
            margin-top: 10px
         }
      }
        .status{
        width: 60px;
        height: 30px;
        color:aliceblue;
        border: none;
        border-radius: 10%;
        font-size: 12px;
        font-family: YaHei;
        background-color: #888888;
    }
    .statu{
      width: 60px;
      height: 30px;
      background-color: #f0f9eb;
      border-color: #e1f3d8;
      color: #67c23a;
       border: none;
        border-radius: 10%;
        font-size: 12px;
        font-family: YaHei;
    }
    ::v-deep .el-form-item__label{
        font-weight: 400;
    }
    .btnBox{
         display: flex;
         margin:30px 0;
         justify-content: center;
    }
</style>
